<script lang="ts" setup>
import { reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { useUserStore } from "@/store/modules/user"
import { type FormInstance, type FormRules } from "element-plus"
import { getLoginCodeApi } from "@/api/login"
import { type LoginRequestData } from "@/api/login/types/login"
// import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
import LeftLogo from "@/icons/svg/leftLogo.svg";
import LOGO from "@/assets/layouts/LOGO.svg";

const router = useRouter()
const checked = ref(false)
/** 登录表单元素的引用 */
const loginFormRef = ref<FormInstance | null>(null)

/** 登录按钮 Loading */
const loading = ref(false)
/** 验证码 URL */
const codeUrl = ref("")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  mobile: "1315583887",
  sms: ""
})
/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],

  sms: [{ required: true, message: "请输入验证码", trigger: "blur" }]
}


/** 登录逻辑 */
const handleLogin = () => {
  loginFormRef.value?.validate((valid: boolean, fields) => {
    if (valid) {
      loading.value = true
      useUserStore()
        .login(loginFormData)
        .then((code) => {
          if (code === 0) {
            console.log(code, '登录成功');
            router.push({ path: "/" })
          }
        })
        .catch(() => {
          console.log('登陆失败');
          loginFormData.sms = ""
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      console.error("表单校验不通过", fields)
    }
  })
}

const state = reactive({
  // 获取验证码
  getCodeText: '获取验证码',
  disabled: false,
  holdTime: 60, //默认60秒计时
})

const onGetCode = () => {
  try {
    let captchaId = '190901371'
    // 腾讯滑块验证码appid生成一个滑块验证码对象
    var captcha = new window.TencentCaptcha(captchaId, function (res: any) {
      if (res.ret === 0) {

        state.disabled = true
        state.getCodeText = "发送中..." //发送验证码
        setTimeout(() => {
          // showToast('验证码已发送')
          setTimer(); //调用定时器方法
        }, 1000)
        codeMsg(res)
      }
    })
    // // 滑块显示
    captcha.show()
    // return
  } catch (error) {
    console.log(error);

  }

}

const codeMsg = (res: any) => {
  const p = {
    mobile_numb: loginFormData.mobile,
    randstr: res.randstr,
    ticket: res.ticket
  }
  getLoginCodeApi(p).then((res) => {
    codeUrl.value = res.data
  })
}
let Timer = null as any

function setTimer() {
  Timer = setInterval(() => {
    if (state.holdTime <= 0) {
      state.disabled = false
      state.getCodeText = "获取验证码"
      state.holdTime = 60
      clearInterval(Timer); //清除该函数
      return;
    }
    state.getCodeText = `${state.holdTime}s后重新获取 `
    state.holdTime--;
  }, 1000)
}

</script>

<template>
  <div class="login-container">
    <!-- <ThemeSwitch class="theme-switch" /> -->
    <el-row>
      <el-col :span="10">
        <div class="leftLogo">
          <div>
            <div class="logoTxt">
              <img :src="LOGO" alt="" srcset="">
              <div class="span">YUNSHAN TEC</div>
            </div>
            <img :src="LeftLogo" alt="" srcset="">
            <Footer />

          </div>
        </div>

      </el-col>
      <el-col :span="14">
        <div class="login-card">
          <transition name="el-fade-in">

            <div class="login-right">
              <div class="title">
                <!-- <img src="@/assets/layouts/logo-text-2.png" /> -->
                登录云珊AI中台
              </div>
              <div class="content">
                <el-form :label-position="'top'" label-width="100px" ref="loginFormRef" :model="loginFormData"
                  :rules="loginFormRules" @keyup.enter="handleLogin">
                  <el-form-item label="手机号" prop="mobile">
                    <el-input v-model.trim="loginFormData.mobile" placeholder="请输入手机号" type="text" tabindex="1"
                      size="large" />
                  </el-form-item>

                  <el-form-item label="短信验证码" prop="sms">
                    <el-input v-model.trim="loginFormData.sms" placeholder="请输入短信验证码" type="text" tabindex="3"
                      maxlength="7" size="large">
                      <template #append>
                        <button :disabled="state.disabled" @click.prevent="onGetCode" class="getCode">{{
                          state.getCodeText
                        }}</button>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-button class="smBt" :loading="loading" type="info" size="large"
                    @click.prevent="handleLogin">登录</el-button>
                  <el-checkbox v-model="checked" label="记住登录信息" size="large" />
                </el-form>
              </div>
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<style lang="scss" scoped>
.login-container {
  // align-items: center;
  min-height: 100%;
  background: #fff;

  // .smbt {
  //   margin: 20px;
  // }

  ::v-deep .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #333333;
    border-color: #333333;
  }

  ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #606266;
  }

  .getCode {
    margin: 0 10px;
    cursor: pointer;
    color: #333333;
    border: none;
    background: #fff;
  }

  ::v-deep .el-input-group__append {
    background: #fff;
  }

  .theme-switch {
    position: fixed;
    top: 5%;
    right: 5%;
    cursor: pointer;
  }

  .leftLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    background-image: url("../../assets/layouts/Maskgroup.png");
    background-size: 100% 100%;

    .logoTxt {
      // line-height: 40px;
      display: flex;
      margin-bottom: 50px;
      justify-content: center;
      align-items: center;

      .span {
        font-size: 24px;
        font-weight: 600;
        margin-left: 10px;

      }
    }
  }

  .login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    .login-right {
      min-width: 40%
    }

    .title {
      display: flex;
      // justify-content: center;
      // align-items: center;
      font-weight: 600;
      letter-spacing: 0px;
      text-align: left;
      color: #333333;
      margin-bottom: 50px;
      font-size: 28px;

      img {
        height: 100%;
      }
    }

    .content {

      // padding: 20px 50px 50px 50px;
      :deep(.el-input-group__append) {
        padding: 0;
        overflow: hidden;

        .el-image {
          width: 100px;
          height: 40px;
          border-left: 0px;
          user-select: none;
          cursor: pointer;
          text-align: center;
        }
      }

      .el-button {
        width: 100%;
        margin-top: 40px;
      }
    }
  }
}
</style>
